<template>
    <div class="artist-add">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>添加艺术家信息</span>
        </div>
        <el-form :model="artistForm" :rules="rules" ref="artistForm" label-width="100px">
          <el-form-item label="艺术家名称" prop="concertName">
            <el-input v-model="artistForm.concertName"></el-input>
          </el-form-item>
          <el-form-item label="演出日期" prop="date">
            <el-date-picker
              v-model="artistForm.date"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="演出时间" prop="time">
            <el-time-picker
              v-model="artistForm.time"
              placeholder="选择时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="票价" prop="price">
            <el-input type="number" v-model.number="artistForm.price"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="artistForm.remarks"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('artistForm')">添加艺术家信息</el-button>
            <el-button @click="resetForm('artistForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ArtistAdd', // 组件的名称
    data() { // 组件的初始数据函数
      return {
        // 定义 artistForm 对象，用于表单数据绑定
        artistForm: {
          concertName: '', // 艺术家名称
          date: '',        // 演出日期
          time: '',         // 演出时间
          price: 0,         // 票价
          remarks: '',     // 备注
        },
        // 定义表单验证规则
        rules: {
          concertName: [ // 演唱会名称的验证规则
            { required: true, message: '请输入艺术家名称', trigger: 'blur' }, // 非空验证
          ],
          date: [ // 演出日期的验证规则
            { type: 'date', required: true, message: '请选择演出日期', trigger: 'change' }, // 日期类型和非空验证
          ],
          time: [ // 演出时间的验证规则
            { type: 'date', required: true, message: '请选择演出时间', trigger: 'change' }, // 日期类型和非空验证
          ],
          price: [ // 票价的验证规则
            { required: true, message: '请输入票价', trigger: 'blur' }, // 非空验证
            { type: 'number', message: '票价必须为数字', trigger: 'blur' }, // 数字类型验证
          ],
        },
      };
    },
    methods: { // 组件的方法
      // 提交表单的方法
      submitForm(formName) {
        // 校验表单
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 如果表单校验成功，弹出提示框
            this.$alert('添加票务成功！', '提示', {
              confirmButtonText: '确定',
              // 点击确定按钮后的回调函数
              callback: action => {
                this.resetForm(formName); // 重置表单
              }
            });
          } else {
            // 如果表单校验失败，显示错误消息
            this.$message.error('添加艺术家失败，请检查表单信息。');
            return false;
          }
        });
      },
      // 重置表单的方法
      resetForm(formName) {
        this.$refs[formName].resetFields(); // 重置指定的表单项到 `data` 中定义的初始值
      },
    },
  };
  </script>
  
  <style scoped>
  .artist-add {
    padding: 20px;
  }
  </style>